<%--
  Created by IntelliJ IDEA.
  User: 86188
  Date: 2025/3/20
  Time: 11:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
            crossorigin="anonymous"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员后台</title>
    <link href="${pageContext.request.contextPath}/static/css/Admin.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/common.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="admin-container">
    <!-- 侧边导航 -->
    <aside class="admin-sidebar">
        <div class="admin-profile">
            <i class="fas fa-user-shield profile-icon"></i>
            <h3>${requestScope.Admin.fullName}</h3>
            <p>管理员</p>
        </div>
        <nav class="admin-menu">
            <ul>
                <li class="menu-item active" data-target="user-management"><i class="fas fa-users"></i> 用户管理</li>
                <li class="menu-item" data-target="course-management">
                    <i class="fas fa-book-open"></i> 课程管理

                </li>
                <li class="menu-item" data-target="unit-management">
                    <i class="fas fa-cubes"></i>
                    单元管理

                </li>
                <li class="menu-item" data-target="profile-settings"><i class="fas  fa-user-circle"></i> 个人信息</li>
            </ul>
        </nav>
    </aside>

    <!-- 主内容区 -->
    <main class="admin-main">
        <header class="content-header">
            <div class="header-actions">
                <div class="profile-dropdown">
                    <button class="profile-btn">
                        <i class="fas fa-user-circle"></i> ${requestScope.Admin.fullName}
                        <i class="fas fa-caret-down"></i>
                    </button>
                    <div class="dropdown-menu">
                        <a href="ChangePasswordController">修改密码</a>
                        <a href="${pageContext.request.contextPath}/login.jsp">退出登录</a>
                    </div>
                </div>
            </div>
        </header>
        <!-- 用户管理模块 -->
        <section id="user-management" class="content-section active">
            <div class="card">
                <div class="card-header">
                    <h3><i class="fas fa-users-cog"></i> 用户管理</h3>
                    <div class="action-buttons">
                        <button class="btn btn-primary" id="add-user"><i class="fas fa-plus"></i> 添加用户</button>
<%--                        <button class="btn btn-secondary" id="batch-add"><i class="fas fa-file-import"></i> 批量导入</button>--%>
                    </div>
                </div>
                <div class="card-body">
                    <table class="data-table">
                        <thead>
                        <tr>
                            <th>用户ID</th>
                            <th>用户名</th>
                            <th>角色</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </section>


        <!-- 课程管理模块 -->
        <section id="course-management" class="content-section">
            <div class="management-container">
                <!-- 操作导航 -->
                <div class="operation-tabs">
                    <button type="button" class="tab-btn active" data-target="course-list">课程列表</button>
                    <button type="button" class="tab-btn" data-target="add-course">新增课程</button>
<%--                    <div class="danger-actions">--%>
<%--                        <button class="btn-danger" data-target="delete-course">--%>
<%--                            <i class="fas fa-trash"></i> 批量删除--%>
<%--                        </button>--%>
<%--                    </div>--%>
                </div>

                <!-- 课程列表/编辑区 -->
                <div class="tab-content active" id="course-list">
                    <div class="card combined-card">
                        <div class="card-header">
                            <h3><i class="fas fa-book-open"></i> 当前课程列表</h3>
<%--                            <div class="search-box">--%>
<%--                                <input type="text" placeholder="搜索课程..." class="search-input">--%>
<%--                                <i class="fas fa-search"></i>--%>
<%--                            </div>--%>
                        </div>
                        <div class="card-body">
                            <!-- 课程表格 -->
                            <table class="course-data-table">
                                <thead>
                                <tr>
<%--                                    <th><input type="checkbox" id="selectAll2"></th>--%>
                                    <th>课程代码</th>
                                    <th>课程名称</th>
                                    <th>学分</th>
                                    <th>任课老师</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>



            </div>
        </section>

<%--        班级单元管理--%>

        <section id="unit-management" class="content-section">
            <div class="management-container">
                <!-- 操作导航 -->
                <div class="operation-tabs">
                    <button type="button" class="tab-btn active" data-target="unit-list">单元列表</button>
                    <button type="button" class="tab-btn" data-target="add-unit">新增单元</button>

                </div>

                <!-- 单元列表 -->
                <div class="tab-content active" id="unit-list">
                    <div class="card">
                        <div class="card-header">
                            <h3><i class="fas fa-cubes"></i> 当前单元列表</h3>
                        </div>
                        <div class="card-body">
                            <table class="unit-data-table">
                                <thead>
                                <tr>
                                    <th>单元名称</th>
                                    <th>所属描述</th>
                                    <th>所属课程ID</th>
                                    <th>单元时长</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <!-- 动态加载数据 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </section>




        <!-- 管理员个人信息板块 -->

        <section id="profile-settings" class="content-section">
            <div class="profile-card">
                <!-- 卡片头部 -->
                <div class="card-header profile-header">
                    <i class="fas fa-id-card"></i>
                    <h3>个人信息管理</h3>
                    <div class="header-actions">
                        <%--                            <button class="btn-edit-profile">--%>
                        <%--                                <i class="fas fa-edit"></i> 编辑信息--%>
                        <%--                            </button>--%>
                    </div>
                </div>

                <!-- 卡片主体 -->
                <div class="card-body">
                    <div class="profile-content">
                        <!-- 左侧头像区 -->
                        <div class="avatar-section">
                            <div class="avatar-upload">
                                <div class="avatar-preview">
                                    <img src="${pageContext.request.contextPath}/static/image/admin.png"
                                         alt="用户头像"
                                         id="avatarPreview">
                                </div>
                                <div class="upload-controls">
                                    <input type="file"
                                           id="avatarInput"
                                           accept="image/*"
                                           hidden>
                                    <label for="avatarInput" class="btn-upload">
                                        <i class="fas fa-camera"></i> 更换头像
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- 右侧信息区 -->
                        <div class="info-section">
                            <!-- 基本信息 -->
                            <div class="info-group">
                                <h4><i class="fas fa-user-tie"></i> 基本信息</h4>
                                <dl class="info-grid">
                                    <dt>工号</dt>
                                    <dd>${requestScope.Admin.username}</dd>
                                    <dt>姓名</dt>
                                    <dd>${requestScope.Admin.fullName}</dd>
                                    <dt>学院</dt>
                                    <dd>${requestScope.Admin.department}</dd>
                                </dl>
                            </div>

                            <!-- 联系信息 -->
                            <div class="info-group">
                                <h4><i class="fas fa-address-book"></i> 联系信息</h4>
                                <dl class="info-grid">
                                    <dt>电子邮箱</dt>
                                    <dd>${requestScope.Admin.email}</dd>
                                    <dt>联系电话</dt>
                                    <dd>${requestScope.Admin.contactPhone}</dd>
                                    <dt>办公室</dt>
                                    <dd>${requestScope.Admin.office}</dd>
                                </dl>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </main>
</div>

<!-- 模态框模板 -->
<!-- 在Admin.jsp的模态框模板区域添加以下代码 -->
<div id="add-course-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h4><i class="fas fa-book-medical"></i> 新增课程</h4>
            <span class="modal-close">&times;</span>
        </div>
        <div class="modal-body">
            <form id="course-form">
                <div class="form-group">
                    <label>课程代码 <span class="required">*</span></label>
                    <input type="text"
                           name="courseCode"
                           required
                           placeholder="例：JA101">
                    <small class="hint">格式：2大写字母+3数字</small>
                </div>

                <div class="form-group">
                    <label>课程名称 <span class="required">*</span></label>
                    <input type="text"
                           name="courseName"
                           required
                           maxlength="50"
                           placeholder="例：Java程序设计基础">
                </div>

                <div class="form-group">
                    <label>学分 <span class="required">*</span></label>
                    <select name="credit" required>
                        <option value="">请选择学分</option>
                        <option value="1">1学分</option>
                        <option value="2">2学分</option>
                        <option value="3">3学分</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>任课老师 <span class="required">*</span></label>
                    <input type="text"
                           name="teacher"
                           required
                           placeholder="输入教师姓名">
                </div>

                <div class="form-actions">
                    <button type="button" class="btn-cancel">取消</button>
                    <button type="submit" class="btn-confirm">创建课程</button>
                </div>
            </form>
        </div>
    </div>
</div>
<%--新增单元--%>
<div id="add-unit-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h4><i class="fas fa-cube"></i> 新增教学单元</h4>
            <span class="modal-close">&times;</span>
        </div>
        <div class="modal-body">
            <form id="unit-form">
                <div class="form-group">
                    <label>单元名称 <span class="required">*</span></label>
                    <input type="text"
                           name="unitName"
                           required
                           placeholder="例：第一单元:Java基础语法">
                </div>

                <div class="form-group">
                    <label>单元描述</label>
                    <textarea name="unitDesc" rows="3"
                              placeholder="请输入单元描述信息"></textarea>
                </div>

                <div class="form-group">
                    <label>课时时长（小时）<span class="required">*</span></label>
                    <input type="number"
                           name="unitDuration"
                           min="1"
                           max="10"
                           step="0.5"
                           required
                           placeholder="例：2">
                </div>

                <div class="form-group">
                    <label>关联课程 <span class="required">*</span></label>
                    <select name="courseId" class="course-select" required>
                        <option value="">请选择课程</option>
                        <!-- 动态加载课程选项 -->
                    </select>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn-cancel">取消</button>
                    <button type="submit" class="btn-confirm">创建单元</button>
                </div>
            </form>
        </div>
    </div>
</div>


<script src="${pageContext.request.contextPath}/static/js/admin.js">

</script>
<script src="${pageContext.request.contextPath}/static/js/common.js"></script>
<script src="${pageContext.request.contextPath}/static/js/Adm_Ajax.js"></script>
</body>
</html>

